<template>
    <el-container>
        <el-aside width=15% class="left">
            <TreemenuVue></TreemenuVue>
        </el-aside>
        <el-container>
            <el-header class="header">
                <BreadVue></BreadVue>
                <el-button-group>
                    <el-button type="primary">
                        <router-link to="/personal">个人中心</router-link>
                    </el-button>
                    <el-popconfirm confirm-button-text="Yes" cancel-button-text="No" :icon="InfoFilled" icon-color="#626AEF"
                        title="你确定要退出登录吗?" @confirm="confirmEvent" @cancel="cancelEvent">
                        <template #reference>
                            <el-button type="primary">退出登录</el-button>
                        </template>
                    </el-popconfirm>
                </el-button-group>
            </el-header>
            <el-main>
                <div class="block">
        
                    <el-descriptions title="用户信息" :border="true" size="default" :column="1">
                        <el-descriptions-item label="昵称">{{ userDate.nickname }}</el-descriptions-item>
                        <el-descriptions-item label="姓名">{{ userDate.username }}</el-descriptions-item>
                        <el-descriptions-item label="邮箱">{{ userDate.email }}</el-descriptions-item>
                        <el-descriptions-item label="职务">{{ userDate.duty }}</el-descriptions-item>
                        <el-descriptions-item label="性别"> {{ userDate.nickname === '1' ? '女性' : '男性'
                        }}</el-descriptions-item>

                    </el-descriptions>
                </div>
            </el-main>
        </el-container>
    </el-container>
</template>
  
<script setup>
import { InfoFilled } from "@element-plus/icons-vue";
import { useUserStore } from "@/stores/user";
import { useRouter } from "vue-router";
import TreemenuVue from "@/view/home/Treemenu.vue"
import BreadVue from './home/Bread.vue'

const router = useRouter();
const userStore = useUserStore();
const confirmEvent = () => {
    userStore.cleraUserInfo();
    router.push("/login");
};
const userDateString = localStorage.getItem("userDate");
const userDate = JSON.parse(userDateString);
const cancelEvent = () => {
};



</script>
<style scoped>
.block {
    border: 3px solid rgb(255, 208, 75);
    border-radius: 10px;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
    padding: 20px;
}

.left {
    background-color: rgb(238, 241, 246);
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    border-right: 3px solid rgb(255, 208, 75);
    border-bottom: 3px solid rgb(255, 208, 75);
}

.grid-content {
    border-radius: 4px;
    min-height: 36px;
}

el-aside {
    height: 10000px;
}

.header {
    height: 70px;
    background-color: rgb(67, 74, 80);
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    border-bottom: 3px solid rgb(255, 208, 75);
    padding: 5px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-left: 0px;
    margin-right: 0px;
}</style>